<template>
    <div class="issue">
        <van-nav-bar title="发布"/>

        <div class="classify">
            <van-field
            readonly
            clickable
            label="分类"
            :value="cate_name"
            placeholder="选择分类"
            @click="showPicker = true"/>
            <van-popup v-model="showPicker" round position="bottom">
                <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"/>
            </van-popup>
        </div>

        <div class="classify">
            <van-field v-model="title"   placeholder="请输入至少6个字符的标题" />
        </div>

        <div @click="show=true" class="nr">
            <p>内容</p><p v-html="html"></p>
        </div>

        <div class="classify1">
            <van-uploader v-model="fileList" :after-read="afterRead" :max-count="3"  />
        </div>
        <div class="btn">
             <button @click="getissue">发布</button>
        </div> 

        <van-action-sheet v-model="show" title="标题">
            <div class="content">
                <my-editor @xiaoxi="get"></my-editor>
            </div>
        </van-action-sheet>
    </div>
</template>

<script>
// 弹出层
import { Picker } from 'vant';
import { Popup } from 'vant';

import { ActionSheet } from 'vant';

import { Uploader } from 'vant';
import { Field } from 'vant';
import MyEditor from '@/components/MyEditor.vue'
export default {
    name: 'issue',
    components:{
        MyEditor,
        [Field.name]:Field,
        [Picker.name]:Picker,
        [Popup.name]:Popup,
        [Uploader.name]:Uploader,
        [ActionSheet.name]:ActionSheet,
    },
    data() {
        return {
            cate_name:'',
            cate_id:'',
            title: '',
            content:'',
            nav:[],
            imageSrc:[],
            fileList:[],
            showPicker: false,
            columns:[],
            show:false,
            html:'<p style="color:gray">请输入内容</p>'
        };
    },

    mounted() {

    },
    created(){
        this.getnav()
    },
    methods: {
        get(val) {
            console.log(val);
            this.html = val
            this.show=false
        },
        onConfirm(value,index) {
            // console.log(value,index);
            this.cate_name=this.nav[index].name
            console.log(this.cate_name);    

            this.cate_id=this.nav[index]._id
            console.log(this.cate_id);

            this.cate_name = value;
            this.showPicker = false;
        },
        // 获取分类
        getnav(){
            this.$http.post('/api/get_cate_list')
            .then(res=>{
                this.nav=res.data;
                console.log(this.nav);
                this.nav.forEach(v => {
                    console.log(v.name);
                    this.columns.push(v.name)
                });
            })
        },
        async afterRead(file1) {
            // 此时可以自行将文件上传至服务器
            console.log(file1);
            let file=file1.file
            let { type } = file1.file;
            type = type.split('/')[1];  
			// 重新命名
            console.log(type);
			let file_name = `${new Date().getTime()}_${Math.random()
				.toString(36)
				.slice(2)}.${type}`;
				
				
				
            // 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息
			
			let { token } = await this.$http.post('/upload/token');
			
			
            // new一个form data   并且把文件 token  和文件的名字放进去  file token key是固定的 不能改 
			const formdata = new FormData();
			formdata.append('file', file);
			formdata.append('token', token);
			formdata.append('key', file_name);
			
			// https://upload-z1.qiniup.com 是上传到七牛的真正接口  其中z1是华北区域
			
			let result = await this.$http.post('https://upload-z1.qiniup.com', formdata);
			console.log(result);
			console.log(`http://toutiao.longxiaokj.com/` + result.key);

            this.imageSrc.push(`http://toutiao.longxiaokj.com/` + result.key);
            console.log(this.imageSrc);
        },
       

        // 发布
        getissue(){
            let author=JSON.parse(localStorage.getItem('userInfo')).nickname
            let author_id=localStorage.getItem('uid')
            console.log(author_id);
            let{cate_name,cate_id,title,html,imageSrc}=this
            console.log(imageSrc);
            // console.log(this.cate_name,this.cate_id);
            this.$http.post('/api/add_article',{
                title,
                content:html,
                cate_name,
                cate_id,
                author,
                author_id,
                imageSrc
            })
            .then(res=>{
               console.log(res);
                if(res.code===0){
                    this.$toast.success('已完成发布当前内容');
                    this.title='',
                    this.cate_name='',
                    this.html='',
                    this.imageSrc=[],
                    this.fileList=[]
                }
            })
        },

    },
};
</script>

<style lang="scss" scoped>
.content{
    height: 156vw;
}
.nr{
    background-color: #fff;
    display: flex;
    margin-bottom: 10px;
    padding: 10px 0;
    p:nth-child(1){
        width: 61px;
        text-align: center;
        color: #717171;
        font-size: 16px;
        line-height: 36px;
    }
    P:nth-child(2){
        line-height: 36px;
        padding: 0 10px;
    }
}
.issue{
    // margin-bottom: 300px;
    background-color: rgb(232, 232, 232);
    height: 100%;
    .classify{
        margin: 10px 0;
    }
}
.classify1{
    background-color: #fff;
    padding-top: 10px;
}
.btn{
    background-color: #fff;
    margin-top: 15px;
    button{
        width: 60vw;
        height: 41px;
        margin-left: 18vw;
        background-color: #78b2ff;
        border: none;
        border-radius: 16px;
        font-size: 17px;
        color: #e3e3e3;
    }
}

</style>